<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盒模型 - 外边距</title>
</head>

<body style="background-color: gray;">
    <!-- 逐渐拖动窗口，改变宽度，查看页面如何布局 -->
    <h1>盒模型 - 外边距</h1>
       <!-- Case 2 ： 浏览器中并排放置两个内联元素时，
        水平方向：它们之间的外边距是30px (SUM)      
    -->
    <p style="margin: 10px;padding: 10px    ">
        <img src="../../resources/images/design-illustration.svg"
            style="background-color: darkorange; width: 200px;height: 200px;margin: 0px 10px 0px 0px; padding: 10px ;border: chartreuse 10px solid;" />
        <img src="../../resources/images/design-illustration.svg"
            style="background-color:darkorange; width: 200px;height: 200px;margin: 0px 0px 0px 20px; padding: 10px ;border: chartreuse 10px solid;" />
    </p>
</body>

</html>